<template>
	<view class="live" style="">
		<navBar isBack backColor="#fff" class="navBar" background="background: rgba(0,0,0,.1);">
			<!-- <view slot="center" class="HeadView">
				<view class="HeadItem">
					<view class="HeadImg">
						<image src="../../../static/common/avator.png" mode=""></image>
					</view>
					<view class="HeadCenter">
						<view class="HeadName">李一桐</view>
						<view class="HeadLook">2101观看</view>
					</view>
					<view class="HeadIcon">
						<u-icon size="30" color="#fff" name="heart"></u-icon>
						<view class="HeadClick">关注</view>
					</view>
				</view>
			</view> -->
		</navBar>
		<!-- LiveDetaileStatus: '', //直播状态(0关闭,1开启)
				StreamStatus: '', //离开状态(0否,1是) -->
		<!-- 视频 -->
		<video v-if="VideoAuto" enable-danmu :enable-progress-gesture="false" :controls="false" id="myvideo"
			autoplay='true' @ended="ended" :src="liveUrl" objectFit='cover' @error="VideoError">
		</video>

		<!-- LiveStatus:'', //start开播  leave离开  leave离开  resume续播 close下播 -->
		<!-- 		<u-popup v-model="showMask" mode="center" :mask-close-able="false" :zoom="true"
			:mask-custom-style="{background: 'rgba(0, 0, 0, 0.6)'}">
			<view style="background: rgba(0, 0, 0, 0);">
					<u-loading size="136"></u-loading>
			</view>
		</u-popup> -->
		<u-mask :show="loadingMask" :duration="400" :zoom="true" z-index="99999" @click="MaskBool"
			:mask-click-able="true" :custom-style="{background: 'rgba(0, 0, 0, 0.9)'}">
		</u-mask>
		<!-- <u-popup v-model="showMask" mode="center" :mask-close-able="false" :zoom="true"
			:mask-custom-style="{background: 'rgba(0, 0, 0, 0.9)'}" :custom-style="{background:'none',}">
			<view style="background: rgba(255, 255, 255, 0);color: #fff;">主播正在连线当中。。。</view>
		</u-popup> -->
		<view v-if="LiveStatus == 'leave'" class="LeaveLive" style="">
			主播暂时离开，请稍等……
		</view>

		<view class="CloseLive" v-if="LiveStatus =='close'" style="">
			<view>直播已结束</view>
			<view class="CloseBtn" style="" @click="LeaveLiveRoom">离开直播间</view>
		</view>
		<!-- 商品推荐 -->
		<view class="GoodsView" v-if="LiveStatus !='close'">
			<!-- <view class="GoodsItem">
				<view class="GoodsImage">
					<image src="https://cos.ryz1620.com/liankun/static/live/livetui.png"></image>
					<view class="GoodsIndex">8</view>
				</view>
				<view class="GoodsMain">
					<view class="TextLenght GoodsTitle">讲解中 | 【纯棉透气】讲解中 | 【纯棉透气】</view>
					<view class="TextLenght GoodsMessage">夏季薄款舒适休闲外夏季薄款舒适休闲外</view>
					<view class="GoodsPrice">
						<view class="GoodsMoney">￥520</view>
						<view class="GoodsAddCart">加入购物车</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 弹幕 -->
		<view id="tanmu" class="tanmu" v-if="LiveStatus !='close'">
			<scroll-view id="page" style="height: 300rpx;" scroll-y="true" :scroll-top="scrollTop">
				<view style="height: 300rpx;display: flex;flex-direction: column-reverse; overflow-y: auto;">
					<view v-for="(item,index) in danmuList" :key="index" class="tanmuText">
						<view>
							<!-- <text class="tanmu_Vip">{{item.vip}}</text> -->
							<text class="tanmu_Name">{{item.name}}:</text>
							<text class="tanmu_Text">{{item.text}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 输入框 -->
		<view v-if="LiveStatus !='close'"
			:style="{position: 'absolute',bottom: PositionTops + 'px',left:PositionLeft+'rpx',width: PositionTops == 25 ? 50+'%' :100+'%',}"
			:class="[PositionTops == 25 ? 'InputView' : 'InputViewTwo']">
			<input type="text" v-model="InputValue" placeholder="跟主播互动吧" placeholder-style="color:#999;"
				@eyboardheightchange="bindkeyboardheightchange" :adjust-position="false" @focus="inputFocus"
				@blur="blurInput" confirm-type="send" @confirm="InputConfirm" />
		</view>
		<!-- 分享，点赞 -->
		<view class="IconView" v-if="LiveStatus !='close'">
			<view class="IconShare" @click="is_show_model=true">
				<view class="IconShareImg">
					<image src="https://cos.ryz1620.com/liankun/static/live/liveShare.png" mode=""></image>
				</view>
			</view>
			<!-- <canvas canvas-id="thumsCanvas" id="thumsCanvas" style="width:100px;height:300px"></canvas> -->
			<view class="IconFabulous" @click="thumbsUp">
				<canvas canvas-id="thumsCanvas" id="thumsCanvas"
					style="width:200rpx;height:600rpx;position: absolute;top: -600rpx;left: -100rpx;"></canvas>
				<view style="width: 80rpx;height: 80rpx;background: rgba(0, 0, 0, .26);border-radius: 50%;">
					<image src="https://cos.ryz1620.com/liankun/static/live/liveClick.png" mode=""></image>
				</view>
				<view class="IconFabulousNum">{{LiveDetail.support_num}}</view>
			</view>

		</view>
		<!-- <view class="content">
			<button class="button" type="default" @click="thumbsUp">点赞</button>
		</view> -->
		<!-- 商品按钮 -->
		<view class="goodsicon" @click="ShowGoodsList" v-if="LiveStatus !='close'">
			<image src="https://cos.ryz1620.com/liankun/static/live/liveGoods.png" mode=""></image>
		</view>
		<!-- 商品弹出层 -->
		<view>
			<u-popup id="popupView" v-model="GoodsShow" height="1000" mode="bottom" border-radius="14" :closeable="true"
				:safe-area-inset-bottom="true" style="position: relative;">
				<view>
					<!-- <scroll-view class="ScrollList" :scroll-y="true" @scrolltolower="loadMore"> -->
					<view class="ScrollList">
						<!-- #FBF5F7 -->
						<view class="ProductItem" style="background: #fff;" v-for="(item,index) in ProductArr"
							:key="index">
							<view class="ProductImage">
								<image :src="item.main_imgurl.path"></image>
								<view class="ProductTopNum">{{index + 1}}</view>
								<!-- <view class="ProductBgView" v-if="item.isNull">- 已抢光 -</view> -->
								<!-- <view class="ProductTopLive" v-if="item.isLive">
									<u-icon size="16"
										name="https://cos.ryz1620.com/liankun/static/live/liveIcon.png">
									</u-icon>
									<text >讲解中</text>
								</view> -->
							</view>
							<view class="ProductMain">
								<view class="ProductTitle TextLenghtTwo">
									{{item.product_title}}
								</view>
								<view class="ProductMessage">
									<view class="ProductPirce"><text>￥</text>{{item.price}}</view>
									<view class="ProductBtn">
										<view class="ProductCart">
											<view class="ProductIcon">
												<!-- crat_null https://cos.ryz1620.com/liankun/static/live/crat.png-->
												<image
													:src="'https://cos.ryz1620.com/liankun/static/live/crat.png'">
												</image>
											</view>
										</view>
										<!-- FFC7CA :style="{background: item.isNull?'#FFC7CA':'#FD4C53'}"-->
										<view class="ProductCartBtn" style="background:#FD4C53;"
											@click="addCartGoods(item,index)">去抢购</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
					<!--goCartClick pages_mall/pages/mall/cart/cart -->
					<view class="BuyBtn" @click="goCartClick">
						<image src="https://cos.ryz1620.com/liankun/static/live/GoCart.png" mode=""></image>
					</view>
				</view>
			</u-popup>
		</view>
		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model?'show':'']" @click.stop="is_show_model=false"
			v-if="LiveStatus !='close'">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"
				@click.stop="">
				<view class="md-content">
					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<button open-type="share" @click="is_show_model=false" class="sharebtn"></button>
					</view>
					<!-- <view class="md-content-item" @click="popShareToPicture">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view> -->
				</view>
				<view class="cancel" @click="is_show_model=false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	import navBar from '@/components/navBar/navBar.vue';
	import service_mall from '@/service/mall.js';
	import service_my from '@/service/my.js'
	import service_player from '@/service/player.js'
	export default {
		data() {
			return {
				liveUrl: '',
				autoLiveUrl: '', //需播地址
				InputValue: '', //弹幕输入框
				//弹幕 reverse()
				danmuList: [],
				scrollTop: 0, //控制上滑距离
				windowHeight: 0, //页面高度
				PositionTops: 25,
				PositionLeft: 150,
				timer: null,
				GoodsShow: false, //商品列表弹出层
				// 点赞效果
				thumbsUpContext: null,
				thumbsUpTimer: 0,
				thumbsUpQueue: {},
				thumbsUpWidth: 100,
				thumbsUpHeight: 300,
				ClickNum: 0, //点赞数
				ProductArr: [],
				LiveGroupID: '', //群聊id
				LiveID: '', //视频id
				LiveDetail: '', //视频详情
				LiveType: false, //区分分享的时候的BUG
				is_show_model: false, //是否显示分享模态窗
				showMask: false,
				LiveStatus: '', //start开播  leave离开   resume续播 close下播
				VideoAuto: true,
				loadingMask: true,
				LiveDetaileStatus: '', //直播状态(0关闭,1开启)
				StreamStatus: '', //离开状态(0否,1是)
			};
		},

		onLoad(options) {
			this.$utils.getUrl()
			var that = this
			// console.log(options);
			that.LiveID = options.id
		},
		onShow: function(res) {
			var that = this
			uni.showLoading({
				title: '加载中',
			})
			setTimeout(() => {
				uni.hideLoading()
				that.loadingMask = false
			}, 2000)
			var that = this
			that.getLiveDetail(that.LiveID)
			that.videoContext = uni.createVideoContext('myvideo', that);
			// that.getLiveDetail(that.LiveID)
			// this.videoContext.requestFullScreen({ direction: 90 });
			that.$tim.tim.on(that.$tim.sdk.EVENT.MESSAGE_RECEIVED, that.onMessageReceived)
		},
		onReachBottom() {
			// console.log(123);
		},
		onReady() {
			this.thumbsUpContext = uni.createCanvasContext('thumsCanvas');
			var height = uni.getSystemInfoSync().windowHeight;
			this.windowHeight = height
			this.pageScrollToBottom();
		},
		// onHide() {
		// 	var that = this
		// 	let promise = that.$tim.tim.quitGroup('@TGS#aYUKWXIHL');
		// 	promise.then(function(imResponse) {
		// 		console.log(imResponse.data.groupID, "退出成功的群 ID"); // 退出成功的群 ID
		// 	}).catch(function(imError) {
		// 		console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
		// 	});
		// },
		onUnload() {
			var that = this
			// console.log(123);
			let promise = that.$tim.tim.quitGroup(that.LiveGroupID);
			promise.then(function(imResponse) {
				console.log(imResponse.data.groupID, "退出成功的群 ID"); // 退出成功的群 ID
			}).catch(function(imError) {
				console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
			});
		},
		onShareAppMessage(res) {
			let that = this
			// let url = encodeURIComponent(that.liveUrl)
			// url: '/pages_player/pages/playerDetailes/index?url='+ url +'&GroupID='+ item.im_group_id  + that.liveUrl + '&GroupID=' + that.LiveGroupID 
			if (res.from === 'button') {}
			return {
				title: that.LiveDetail.title,
				path: '/pages_player/pages/playerDetailes/index?id=' + that.LiveID,
				success: function(res) {
					that.getgetforwards()
				}
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		methods: {
			MaskBool() {
				this.showMask = !this.showMask
			},
			// 获取详情
			getLiveDetail(LiveID) {
				var that = this
				service_player.getLvieDetailes({
						liveid: LiveID
					})
					.then(res => {
						if (res.code == 1) {
							console.log(res.data);
							that.LiveDetail = res.data
							// if (that.LiveType == false) {
							that.liveUrl = res.data.play_url
							that.autoLiveUrl = res.data.play_url
							that.LiveGroupID = res.data.im_group_id
							that.LiveDetaileStatus = res.data.status
							that.StreamStatus = res.data.stream_status
							
							that.VideoAuto = res.data.status == 1 && res.data.stream_status == 1 ? true : false
							if (res.data.status == 1 && res.data.stream_status == 1) {
								that.LiveStatus = 'start'
							} else if (res.data.status == 1 && res.data.stream_status == 0) {
								that.LiveStatus = 'leave'
							} else if (res.data.status == 0) {
								that.LiveStatus = 'close'
							}
							// LiveStatus: '', //start开播  leave离开  resume续播 close下播
							// console.log(12312312312312312312);
							// setTimeout(()=>{
							that.onavchatoom() //加入群聊
							that.getLvieGoodsList() //h获取商品列表
							// },200)
							// }else{
							// 	// that.$tim.tim.on(that.$tim.sdk.EVENT.SDK_READY, that.onavchatoom)
							// 	that.liveUrl = res.data.play_url
							// 	that.LiveGroupID = res.data.im_group_id
							// 	that.onavchatoom()
							// }
						} else {
							that.$utils.showErr({
								title: res.msg
							})
						}
					})
					.catch(err => {

					})
			},
			ended(e) {
				// console.log('此播放已结束')
			},
			VideoError(e) {
				// console.log('-------------')
				// console.log(e)
				// console.log('此播放错误')
			},
			videoPlay() {},
			VideoPause() {},
			// 获取商品列表
			getLvieGoodsList() {
				var that = this
				service_player.getLvieGoodsList({
						live_id: that.LiveID
					})
					.then(res => {
						if (res.code == 1) {
							// var dataList = []
							var packList = res.data.pack_list
							var GoodsList = res.data.product_list
							var arr = []
							if (packList && packList.length) {
								// console.log("实打实大师的");
								packList.forEach((item, index) => {
									item.packstate = true
								})
							}
							arr = arr.concat(packList, GoodsList)
							that.ProductArr = arr
							// dataList.concat()
							// console.log("-------------------------------------------");
							// // console.log(packList);
							// console.log(this.ProductArr);
							// console.log("-------------------------------------------");
						} else {
							that.$utils.showErr({
								title: res.msg
							})
						}
					})
					.catch(err => {

					})
			},
			// 直播结束离开直播间
			LeaveLiveRoom() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 转发
			getgetforwards() {
				var that = this
				service_player.getForward({
						live_id: that.LiveID
					})
					.then(res => {})
			},
			// 跳转-海报页面
			// popShareToPicture() {
			// 	uni.navigateTo({ url: '/pages_player/pages/playerShare/share?liveid=' + this.LiveID })
			// },
			// 去购物车
			goCartClick() {
				uni.navigateTo({
					url: '/pages_mall/pages/mall/cart/cart'
				});
			},
			// 加入购物车
			addCartGoods(row, index) {
				var that = this
				// console.log(row);
				if (row.packstate) {
					uni.navigateTo({
						url: '/pages_product/pages/product/detail/detail?pack_id=' + row.pack_id,
					})
				} else {
					uni.navigateTo({
						url: '/pages_mall/pages/mall/goods_details/goods_details?id=' + row.product_id,
					})
				}
			},
			// 上拉加载更多
			loadMore: function() {},
			//商品icon点击 
			ShowGoodsList() {
				var that = this
				that.GoodsShow = !that.GoodsShow
			},
			pageScrollToBottom: function() {
				var that = this;
				var height = uni.getSystemInfoSync().windowHeight;
				uni.createSelectorQuery().select('#tanmu').boundingClientRect(function(rect) {
					var r = rect
					if (r.height === 0 || r.height === null || r.height === undefined) {} else {
						var toTop = (that.danmuList.length * r.height + (r.height * 10))
						that.windowHeight = height + 50000
						that.scrollTop = toTop + 50000
					}
				}).exec()
			},
			bindkeyboardheightchange(event) {
				console.log(event);
			},

			inputFocus(e) {
				this.PositionTops = e.detail.height
				this.PositionLeft = 0
				// console.log(e); 
			},
			blurInput(e) {
				// console.log(e);
				this.inputInfo = e.detail.value;
				this.PositionTops = 25;
				this.PositionLeft = 150
				this.InputValue = ''
			},
			InputConfirm(value) {
				// console.log(value.detail.value);+ this.danmuList.length
				// var data = {
				// 	vip: '蒙奇粉丝',
				// 	name: '天空之城',
				// 	text: value.detail.value
				// }
				var that = this
				if (value.detail.value != '') {
					that.sendMsg(value.detail.value);
				}
				this.pageScrollToBottom()

			},
			// 申请加入群聊
			onavchatoom(data) {
				var that = this
				// var group
				let promise = that.$tim.tim.joinGroup({
					groupID: that.LiveGroupID,
					type: that.$tim.sdk.TYPES.GRP_AVCHATROOM
				});
				promise.then(function(imResponse) {
					console.log(imResponse);
					switch (imResponse.data.status) {
						case that.$tim.sdk.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
							console.log('管理员');
							break;
						case that.$tim.sdk.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
							// console.log(imResponse.data.group); // 加入的群组资料
							console.log('加入群聊');
							that.UpDataUserMessage()
							break;
						case that.$tim.sdk.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
							console.log('在群里');
							break;
						default:
							break;
					}
				}).catch(function(imError) {
					console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				});
			},
			// 更新用户信息
			UpDataUserMessage() {
				var that = this
				service_my.getuser({}).then(res => {
					if (res.code == 1) {
						// res.data.userinfo
						let promise = that.$tim.tim.updateMyProfile({
							nick: res.data.userinfo.nickname,
							avatar: res.data.userinfo.headimg,
						});
						promise.then(function(imResponse) {
							// console.log(imResponse.data, '更新资料成功'); // 更新资料成功
						}).catch(function(imError) {
							console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
						});
					}
				}).catch(err => {})
			},
			//接收到的消息
			onMessageReceived(event) {
				// console.log(event, 'sssss')
				let that = this
				var news = event.data[0].payload.text
				var type = event.data[0].conversationType
				var DataKey = event.data[0].payload.data
				// let videoplay = uni.createVideoContext('myvideo', this)
				// that.$tim.sdk.TYPES.CONV_GROUP
				// console.log(that.$tim.sdk.TYPES.MSG_CUSTOM);
				if (type == that.$tim.sdk.TYPES.CONV_GROUP) {
					if (news != undefined && news != null) {
						// console.log(news,111);
						var message = {
							text: news,
							name: event.data[0].nick
						}
						that.danmuList.unshift(message)
					} else if (DataKey != undefined && DataKey != null) {
						console.log(event, 'aaaa')
						let autoMes = event.data[0].payload.data
						let autoMessage = JSON.parse(autoMes)
						// console.log("自定义消息");
						// console.log(autoMessage);
						// ，leave-离开，close-下播（后台关闭直播）,start-开播
						switch (autoMessage.Action) {
							case "start": // 开播
								console.log("开播");
								that.LiveStatus = 'start'
								break;
							case "leave": // 离开
								console.log("离开");
								// that.VideoPause()
								// that.videoContext.pause()
								that.videoContext.stop()
								that.VideoAuto = false
								// that.showMask = true
								that.LiveStatus = 'leave'
								break;
							case "resume": // 续播
								console.log("续播");
								that.LiveStatus = 'resume'
								that.$nextTick(function() {
									that.VideoAuto = true;
									// that.showMask = false
								});
								that.videoContext.play();
								break;
							case "close": // 下播
								// console.log("下播");
								that.LiveStatus = 'close'
								that.VideoAuto = false
								break;
							default:
								break;
						}
						// that.LiveID = options.id
						// 
					}
				}
			},
			// 上拉加载更多
			loadMore: function() {
				var self = this;
				console.log(123);
			},


			//商品icon点击 
			ShowGoodsList() {
				var that = this
				that.GoodsShow = !that.GoodsShow
			},
			pageScrollToBottom: function() {
				var that = this;
				var height = uni.getSystemInfoSync().windowHeight;
				uni.createSelectorQuery().select('#tanmu').boundingClientRect(function(rect) {
					var r = rect
					if (r.height === 0 || r.height === null || r.height === undefined) {} else {
						var toTop = (that.danmuList.length * r.height + (r.height * 10))
						that.windowHeight = height + 50000
						that.scrollTop = toTop + 50000
					}
				}).exec()
			},
			bindkeyboardheightchange(event) {
				console.log(event);
			},

			inputFocus(e) {
				// this.inputInfo = '';
				// if(){}
				this.PositionTops = e.detail.height
				this.PositionLeft = 0
				// console.log(e); 
			},
			blurInput(e) {
				// console.log(e);
				// console.log(e);
				// this.inputInfo = '说点什么...';
				this.inputInfo = e.detail.value;
				this.PositionTops = 25;
				this.PositionLeft = 150
				this.InputValue = ''
			},
			InputConfirm(value) {
				// console.log(value.detail.value);+ this.danmuList.length
				// var data = {
				// 	vip: '蒙奇粉丝',
				// 	name: '天空之城',
				// 	text: value.detail.value
				// }

			},
			// 发送消息
			sendMsg(content) {
				// console.log(content, type)
				var that = this
				//that.+':'+
				let Message = that.$tim.tim.createTextMessage({
					to: that.LiveGroupID,
					conversationType: that.$tim.sdk.TYPES.CONV_GROUP,
					payload: {
						text: content,
					}
				});
				let promise = that.$tim.tim.sendMessage(Message);
				promise.then(res => {
					// console.log("消息", res);
					// var news = res.data.message.payload.text
					var news = {
						text: res.data.message.payload.text,
						name: res.data.message.nick
					}
					that.danmuList.unshift(news)
					that.pageScrollToBottom()
					// console.log(that.informationList, "信息发送成功")
				}).catch(imError => {
					console.warn('sendMessage error:', imError);
				})
			},
			//点赞动画 start
			thumbsUp() {
				var that = this
				uni.getImageInfo({
					src: "https://cos.ryz1620.com/liankun/static/live/thumbsUpImage/" + that
						.getRandomInt(1, 14) + ".png", //服务器返回的图片地址
					success: function(res) {
						//res.path是网络图片的本地地址
						let Path = res.path;
						// const image = "https://cos.ryz1620.com/liankun/static/live/thumbsUpImage/" + this.getRandomInt(1, 14) + ".png";
						const image = Path
						const anmationData = {
							id: new Date().getTime(),
							timer: 0,
							opacity: 0.7,
							pathData: that.generatePathData(),
							image: image,
							factor: {
								speed: 0.004,
								t: 0
							}
						};
						if (Object.keys(that.thumbsUpQueue).length > 0) {
							that.thumbsUpQueue[anmationData.id] = anmationData;
						} else {
							that.thumbsUpQueue[anmationData.id] = anmationData;
							that.createThumbsAnimate();
						}
						if (that.LiveDetail.support_status == 0) {
							service_player.getSupport({
									live_id: that.LiveID,
									status: 1,
								})
								.then(res => {
									if (res.code == 1) {
										// console.log(res);
										that.LiveDetail.support_status = 1
										that.LiveDetail.support_num = that.LiveDetail.support_num + 1
									} else {
										that.$utils.showErr({
											title: res.msg
										})
									}
								})
						}

					},
					fail: function(res) {
						//失败回调
					}
				});

			},
			getRandom(min, max) {
				return Math.random() * (max - min) + min;
			},

			getRandomInt(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},

			generatePathData() {
				let width = this.thumbsUpWidth,
					height = this.thumbsUpHeight;
				const p0 = {
					x: 0.65 * width,
					y: height
				};
				const p1 = {
					x: this.getRandom(0.22 * width, 0.33 * width),
					y: this.getRandom(0.5 * height, 0.75 * height)
				};
				const p2 = {
					x: this.getRandom(0, 0.88 * width),
					y: this.getRandom(0.25 * height, 0.5 * height)
				};
				const p3 = {
					x: this.getRandom(0, 0.88 * width),
					y: this.getRandom(0, 0.125 * height)
				};
				return [p0, p1, p2, p3];
			},

			updatePoint(data, factor) {
				const p0 = data[0];
				const p1 = data[1];
				const p2 = data[2];
				const p3 = data[3];
				const t = factor.t;
				const cx1 = 3 * (p1.x - p0.x);
				const bx1 = 3 * (p2.x - p1.x) - cx1;
				const ax1 = p3.x - p0.x - cx1 - bx1;
				const cy1 = 3 * (p1.y - p0.y);
				const by1 = 3 * (p2.y - p1.y) - cy1;
				const ay1 = p3.y - p0.y - cy1 - by1;
				const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x;
				const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y;
				return {
					x,
					y
				};
			},

			createThumbsAnimate() {
				let width = this.thumbsUpWidth,
					height = this.thumbsUpHeight;
				var that = this;
				Object.keys(that.thumbsUpQueue).forEach(key => {
					const anmationData = that.thumbsUpQueue[+key];
					const {
						x,
						y
					} = this.updatePoint(
						anmationData.pathData,
						anmationData.factor
					);
					const speed = anmationData.factor.speed;
					anmationData.factor.t += speed;
					var curWidth = 40;
					curWidth = (height - y) / 1.5;
					curWidth = Math.min(40, curWidth);
					var curAlpha = anmationData.opacity;
					curAlpha = y / height;
					curAlpha = Math.min(1, curAlpha);
					that.thumbsUpContext.globalAlpha = curAlpha;
					that.thumbsUpContext.drawImage(anmationData.image, x - curWidth / 2, y, curWidth, curWidth);
					if (anmationData.factor.t > 1) {
						delete that.thumbsUpQueue[anmationData.id];
					}
					if (y > height) {
						delete that.thumbsUpQueue[anmationData.id];
					}
				});
				that.thumbsUpContext.draw();
				if (Object.keys(that.thumbsUpQueue).length > 0) {
					that.thumbsUpTimer = setTimeout(() => {
						that.createThumbsAnimate();
					}, 5);
				} else {
					clearTimeout(that.thumbsUpTimer);
					that.thumbsUpContext.draw();
				}
			},

		}
	};
</script>

<style lang="scss">
	page {
		background: #000;
	}

	.content {
		position: absolute;
		bottom: 200rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.button {
		background-color: #4CD964 !important;
		color: white !important;
		width: 700rpx;
	}

	.TextLenght {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.TextLenghtTwo {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	// 头部设置
	.HeadView {
		flex: 1;

		.HeadItem {
			padding: 8rpx 20rpx 8rpx 8rpx;
			background: rgba(0, 0, 0, 0.49);
			width: max-content;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.HeadImg {
				width: 64rpx;
				height: 64rpx;
			}

			.HeadCenter {
				margin: 0 16rpx;

				.HeadName {
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.HeadLook {
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.HeadIcon {
				display: flex;
				align-items: center;
				padding: 10rpx 16rpx;
				background: linear-gradient(180deg, #FF1D25 0%, #FF676C 100%);
				border-radius: 30rpx;

				.HeadClick {
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 10rpx;
				}
			}
		}
	}

	// 分享点赞按钮
	.IconView {
		position: absolute;
		bottom: 50rpx;
		right: 20rpx;
		display: flex;
		align-items: center;

		.IconShare {
			width: 80rpx;
			height: 80rpx;
			background: rgba(0, 0, 0, .26);
			border-radius: 50%;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.IconShareImg {
				width: 38rpx;
				height: 42rpx;
				margin-left: -4rpx;
			}
		}

		.IconFabulous {

			position: relative;

			.IconFabulousNum {
				position: absolute;
				top: -24rpx;
				left: 50%;
				transform: translate(-50%, 0%);
				background: #FFFFFF;
				border-radius: 22rpx;
				padding: 6rpx 16rpx;
				font-size: 18rpx;
				font-weight: 500;
				color: #FF444A;
			}
		}
	}

	// 推荐商品
	.GoodsView {
		position: absolute;
		bottom: 170rpx;
		left: 24rpx;
		color: #fff;

		.GoodsItem {
			padding: 4rpx;
			background: #fff;
			border-radius: 6rpx;
			display: flex;
			align-items: center;

			.GoodsImage {
				width: 144rpx;
				height: 144rpx;
				position: relative;

				.GoodsIndex {
					position: absolute;
					top: 0;
					left: 0;
					background: rgba(0, 0, 0, .78);
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					padding: 4rpx 12rpx;
				}
			}

			.GoodsMain {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 16rpx;
				padding-right: 14rpx;
				width: 260rpx;

				.GoodsTitle {
					margin-bottom: 8rpx;
				}

				.GoodsMessage {
					margin-bottom: 8rpx;
				}

				.GoodsPrice {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.GoodsMoney {
						font-size: 28rpx;
						font-weight: 600;
						color: #FF252D;
					}

					.GoodsAddCart {
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
						background: linear-gradient(180deg, #FF1D25 0%, #FF676C 100%);
						border-radius: 18rpx;
						width: max-content;
						padding: 4rpx 16rpx;
					}
				}
			}
		}
	}

	.live {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background: #000;
		position: absolute;
		top: 0;
		background-image: url(https://cos.ryz1620.com/liankun/static/live/LivePage.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100%;

		#myvideo {
			width: 100%;
			height: 100%;
			position: absolute;
			box-sizing: border-box;
			top: 0;
		}

		// 商品按钮
		.goodsicon {
			position: absolute;
			bottom: 50rpx;
			left: 20rpx;
			// background-color: #007AFF;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
		}

		// 输入框
		.InputView {
			input {
				background-color: rgba(51, 51, 51, .4);
				width: 100%;
				height: 60rpx;
				border-radius: 50rpx;
				padding: 0 26rpx;
			}
		}

		// 键盘弹起之后的输入框
		.InputViewTwo {
			background-color: #fff;
			height: 70rpx;

			input {
				background-color: #fff;
				width: 100%;
				height: 70rpx;
				padding: 0 26rpx;
				flex: 1;
			}
		}

		// 弹幕
		.tanmu {
			position: absolute;
			bottom: 340rpx;
			left: 20rpx;
			height: 300rpx;
			color: #fff;
			overflow: auto;
			max-width: 70%;

			.tanmuText {
				max-width: 100%;
				display: flex;
				align-items: center;
				background-color: rgba(51, 51, 51, .4);
				padding: 8rpx 14rpx;
				border-radius: 50rpx;
				font-size: 24rpx;
				margin-bottom: 10rpx;
				// flex: 1;
				width: max-content;

				text {
					color: #fff;
				}

				.tanmu_Vip {
					padding: 4rpx 14rpx;
					background: rgba(114, 127, 167, .82);
					border-radius: 34rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.tanmu_Name {
					font-size: 24rpx;
					font-weight: 500;
					color: #7DE9F7;
					margin: 0 8rpx;
				}

				.tanmu_Text {
					flex: 1;
					line-height: 38rpx;
				}
			}
		}

		.ScrollList {
			background: #fff;
			// height: 960rpx;
			// margin-top: 40rpx;
			padding-top: 40rpx;

			.ProductItem {
				padding: 20rpx 46rpx;
				display: flex;
				align-items: flex-start;

				.ProductImage {
					width: 170rpx;
					height: 170rpx;
					box-shadow: 0rpx 6rpx 16rpx rgba(0, 0, 0, 0.06);
					position: relative;

					.ProductTopNum {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						position: absolute;
						top: 0;
						left: 0;
						padding: 2rpx 22rpx;
						background: rgba(0, 0, 0, .6);
						border-radius: 4rpx 0rpx 4rpx 0rpx;
					}

					.ProductBgView {
						width: 170rpx;
						height: 170rpx;
						background: rgba(0, 0, 0, .43);
						position: absolute;
						top: 0;
						left: 0;
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 179rpx;
						text-align: center;
					}

					.ProductTopLive {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						position: absolute;
						bottom: 0;
						left: 0;
						background: linear-gradient(360deg, #FF1D25 0%, #FF676C 100%);
						border-radius: 0rpx 0rpx 4rpx 4rpx;
						padding: 4rpx 0;
						flex: 1;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							margin-left: 10rpx;
						}
					}
				}

				.ProductMain {
					flex: 1;
					margin-left: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 170rpx;

					.ProductTitle {
						font-size: 28rpx;
						font-weight: 400;
						color: #1A1C20;
					}

					.ProductMessage {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.ProductPirce {
							font-size: 32rpx;
							font-weight: 600;
							color: #FD4C53;

							text {
								font-size: 20rpx;
							}
						}

						.ProductBtn {
							display: flex;
							align-items: center;

							.ProductCart {
								padding: 10rpx 16rpx 12rpx 16rpx;
								background: #F4F5F8;
								border-radius: 4rpx 0rpx 0rpx 4rpx;

								.ProductIcon {
									width: 33rpx;
									height: 29rpx;
								}
							}
						}

						.ProductCartBtn {
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							padding: 8rpx 32rpx;

							border-radius: 0rpx 4rpx 4rpx 0rpx;
						}
					}

				}
			}
		}
	}

	.LeaveLive {
		position: absolute;
		top: 34%;
		left: 50%;
		transform: translate(-50%, 0%);
		font-size: 32rpx;
		color: #fff;
		flex: 1;
		width: 100%;
		text-align: center;
	}

	.CloseLive {
		position: absolute;
		top: 34%;
		left: 50%;
		transform: translate(-50%, 0%);
		font-size: 32rpx;
		color: #fff;
		flex: 1;
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.CloseBtn {
			padding: 24rpx 52rpx;
			border: 2rpx solid #FFFFFF;
			border-radius: 46rpx;
			width: max-content;
			margin-top: 74rpx;
		}
	}

	.BuyBtn {
		width: 84rpx;
		height: 84rpx;
		position: absolute;
		bottom: 32rpx;
		left: 32rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.cu-modal {
		position: fixed;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		top: 0;
		display: none;
		width: 100%;
		z-index: 500;
	}

	.show {
		display: block;
	}

	.bottom-md {
		position: absolute;
		bottom: 0;
		background: #fff;
	}

	.share {
		position: fixed;
		color: #FFFFFF;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #FE726B, #FE956B);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #FFFFFF;
		color: #888;
		font-weight: normal;
		font-size: 30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
	}

	.md-content-item {
		margin: 0 90rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.md-content-item .s_bIcon {
		font-size: 72rpx;
	}

	.s_bIcon {
		width: 112rpx;
		height: 112rpx;
		color: #fff;
		font-size: 140rpx;
		margin: 60rpx auto 0;
		border-radius: 50%;
		background: #8bc37a;
		box-shadow: 0 0 12rpx rgba(0, 0, 0, .16);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s_bIcons {
		background: #ffd425;
	}

	.SkuView {
		padding: 46rpx 32rpx 0rpx 32rpx;

		.SkuMes {
			display: flex;

			.SkuImg {
				width: 200rpx;
				height: 200rpx;
				box-shadow: 0rpx 6rpx 16rpx rgba(0, 0, 0, 0.06);
				border-radius: 12rpx;
				overflow: hidden;
			}

			.SkuPrice {
				font-size: 46rpx;
				color: #FD4C53;
				margin-left: 32rpx;
				font-weight: 600;
			}
		}

		.SkuTitle {
			font-size: 30rpx;
			color: #000000;
			font-weight: 600;
			margin: 32rpx 0;
		}

		.SkuItem {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			flex-wrap: wrap;
		}

		.SkuItemList {
			padding: 5rpx 20rpx;
			background: #f5f5f5;
			width: max-content;
			border-radius: 30rpx;
			color: #939393;
			margin-right: 20rpx;
		}

		.SkuItemListA {
			padding: 5rpx 20rpx;
			background: #feeff2;
			width: max-content;
			border-radius: 30rpx;
			color: #e9423e;
			margin-right: 20rpx;
		}

		.SkuMun {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	// 弹窗-规格
	.Size {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;

		.S_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .8);
		}

		.S_box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			flex-flow: column;
		}

		.S_bCloak {
			height: 176rpx;
		}

		.S_bContain {
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;
		}

		.S_bClose {
			width: 104rpx;
			height: 120rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.S_bcIcon {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000;
				font-size: 20rpx;
				border-radius: 50%;
				background: #f9f6f3;
			}
		}

		.S_bInfo {
			padding: 36rpx 32rpx 20rpx;

			.S_biHead {
				width: 178rpx;
				height: 178rpx;
				margin-right: 24rpx;
				border-radius: 10rpx;
				background: #f0f0f0;
				box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, .16);
				overflow: hidden;
				float: left;
			}

			.S_biCan {
				overflow: hidden;
			}

			.S_biFee {
				height: 60rpx;
				line-height: 60rpx;
				color: #e9423e;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 20rpx;

				&>text {
					font-size: 44rpx;
				}
			}

			.S_biTip {
				height: 40rpx;
				line-height: 40rpx;
				color: #e9423e;
				font-size: 20rpx;
				margin-top: 10rpx;
				border-radius: 4rpx;
				background: #feeff2;
				display: inline-block;

				.yprice {
					margin-left: 0;
				}
			}

			.S_biRe {
				font-size: 30rpx;
				padding-right: 40rpx;
			}

			.S_biRemark {
				height: 28rpx;
				line-height: 28rpx;
				color: #939393;
				font-size: 20rpx;
				margin-top: 10rpx;
			}
		}

		.S_bConfig {
			overflow: hidden;
			flex: 1;

			.S_bcCan {
				padding: 0 34rpx 146rpx;
			}

			.S_bcGroup {
				padding-top: 40rpx;
				position: relative;

				&:first-child {
					padding-top: 20rpx;
				}
			}

			.S_bcTit {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.S_bcChecks {
				padding-top: 8rpx;
			}

			.S_bcCheck {
				height: 42rpx;
				line-height: 42rpx;
				color: #939393;
				font-size: 24rpx;
				padding: 0 26rpx;
				margin: 16rpx 16rpx 0 0;
				border-radius: 22rpx;
				background: #f5f5f5;
				display: inline-block;

				&.checked {
					color: #e9423e;
					background: #feeff2;
				}
			}

			.S_bcNums {
				height: 48rpx;
				position: absolute;
				top: 36rpx;
				right: -22rpx;
				display: flex;
			}

			.S_bcNum {
				width: 72rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #f6f7fb;
			}

			.S_bcMinus,
			.S_bcAdd {
				width: 72rpx;
				height: 48rpx;
				position: relative;
			}

			.S_bcMinus::before,
			.S_bcAdd::before,
			.S_bcAdd::after {
				content: "";
				width: 24rpx;
				height: 4rpx;
				border-radius: 4rpx;
				background: #333;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.S_bcAdd::after {
				width: 4rpx;
				height: 24rpx;
			}
		}

		.S_bBtns {
			height: 86rpx;
			color: #fff;
			font-weight: bold;
			padding: 20rpx 15rpx 0;
			border-top: 1px solid #f8f6f3;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			box-sizing: content-box;
			display: flex;
			justify-content: space-between;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.S_bbBtn1,
			.S_bbBtn2 {
				width: 294rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 8rpx;
				background: #c3ab7c;
				margin: 0 15rpx;

				&:active {
					opacity: .88;
				}
			}

			.S_bbBtn2 {
				background: #333;
			}
		}
	}
</style>
